<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <!-- 引入 css 文件 -->
        <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
        <style>
            /* 模糊匹配的方式 设置选择器 */
            /* col-xs-2  col-md-10 */
            div[class*="col"] {
                height: 50px;
                border: solid 1px #000;
            }

            .col-20 {
                width: 20%;
                float: left;
            }

            .zidingyi{
                background-color: #023;
            }

            .text-red{
                background-color: rgb(159, 38, 38);
            }
        </style>
    </head>
    <body>
        <div class="container">
            <p>
                有一首诗,写的特别好:
                <mark>问君能有几多愁？恰似一江春水向东流</mark>
            </p>
            <p>不要 <s>998</s> 不要 <s>888</s>, 只要 198, 笔记本电脑抱回家</p>

            <p class="text-left bg-success">
                问君能有几多愁？恰似一江春水向东流
            </p>
            <p class="zidingyi text-center text-danger bg-warning">
                问君能有几多愁？恰似一江春水向东流
            </p>
            <p class="text-right">问君能有几多愁？恰似一江春水向东流</p>

            <blockquote>
                <p>我的舞蹈没人能跳第二遍, 包括我自己</p>
                <footer>尼古拉斯 - 赵四</footer>
            </blockquote>
        </div>

        <script src="./bootstrap/js/jquery.min.js"></script>
        <script src="./bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>
